<template lang="pug">
    div(class="aw-emoji" :style="{height:height}" ref="emoji")
        EmojiMenus(:menus="menus"  @tab="menuTab")
        div(class="aw-emoji-items nano" v-for="menu in menus" v-show="menu.name == menuActived.name")
            EmojiMenuItems(:menu="menu" class="nano-content" @emotion-tab="emotionTab")
            div(class="nano-panel")
</template>

<script>
import EmojiMenus from "./EmojiMenus";
import EmojiMenuItems from "./EmojiMenuItems";
import menus from "./menus";
export default {
  name: "emoji-picker",
  components: { EmojiMenus, EmojiMenuItems },
  data() {
    return {
      menus: menus,
      menuActived: menus[0] // 选中激活的菜单选项
    };
  },
  props: {
    height: { type: String, default: "200px" }
  },
  methods: {
    menuTab(menu) {
      this.menuActived = menu;
      this.$emit("menu-change", menu);
    },
    emotionTab(emotion) {
      const emotionCopy = this.resolve(emotion[2]);
      this.$emit("emotion-tab", emotion, emotionCopy);
    },
    resolve(val) {
      const $el = this.$refs.emoji;
      const imgs = $el.getElementsByClassName("aw-emoji-item");
      let emotion = null;
      for (let i = 0; i < imgs.length; i++) {
        const img = imgs[i];
        const title = img.getAttribute("title");
        if (title != val) continue;
        emotion = img;
        break;
      }

      if (emotion) return emotion.cloneNode(true);

      // -
    },
  }
};
</script>
<style lang="less" scoped>
@import url(./NanoScroller/scroller.css);
.aw-emoji-items {
  background-color: white;
}
</style>
